<template>
	<view>
		<view class="no">订单号：{{orderData.order_no}}</view>
		<view class="prod-img"><image class="img" :src="orderData.goods_img"></image><text>{{orderData.goods_name}}</text></view>
		<view class="list">
			<view class="li">
				<text class="name">享用件数</text>
				<view class="size">{{orderData.buy_num}}件</view>
			</view>
			<view class="li">
				<text class="name">规格</text>
				<view class="size">{{orderData.item_names}}</view>
			</view>
			<view class="li">
				<text class="name">订单价格</text>
				<view class="shop-price">￥{{orderData.order_amount}}</view>
			</view>
			<view class="li">
				<text class="name">下单时间</text>
				<view class="shop-price">{{orderData.create_time}}</view>
			</view>
			<view class="li">
				<text class="name">需补差价</text>
				<view class="cj-price">￥{{order_diff.pay_price}}</view>
			</view>
		</view>
		<view class="footer">
			<view class="pay-btn" @tap="show_paytype">付款</view>
		</view>
		<view class="u-popup-mask" v-if="payPop" @tap="show_paytype" @touchmove.stop=""></view>
		<view class="pay_type_box" :class="[payPop?'z-show':'']">
			<view class="" v-for="(item, index) in payList" :key="index">
				<!-- #ifdef APP-PLUS -->
					<view class="pay_type" :class="item.type"  v-if="item.type == 'alipay'" @tap="pay(item.type)">
						{{item.name}}
					</view>
				<!-- #endif -->
				<view class="pay_type" :class="item.type" @tap="pay(item.type)" v-if="item.type != 'alipay' && item.type != 'granary'">
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="m-full-loading" v-if="bIsShowLoading">
			<view class="m-loading">
				<image src="../../../static/images/loading.gif" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import hl from '@/common/common_zb.js';
	export default {
		data() {
			return {
				orderData: [],
				order_diff: [],
				bIsShowLoading: false,
				payPop: false,
				payList: [],
				order_id: ''	,// 订单表（jewel_order）主键
				options: []
			}
		},
		onLoad(options){
			let that = this;
			that.options = options;
			new Promise((resolve, reject) => {
				that.bIsShowLoading = true;
				hl.get('order/order_diff', {diff_id: options.diff_id}, true, function (res){
					let resdata = res.data;
					if(resdata.code == '-1') {
						hl.showToast(resdata.msg, 1500);
						setTimeout(function (){
							uni.navigateBack();
						}, 1500);
					}
					that.orderData = resdata;
					that.order_id = resdata.id;
					that.order_no = resdata.order_no;
					that.order_diff = that.orderData.order_diff;
					resolve();
				})
			}).then(()=>{
				hl.get('Payment/payList', {}, true, function (res){
					that.payList = res.data.data;
					that.bIsShowLoading = false;
				})
			})
		},
		methods: {
			show_paytype(){
				this.payPop = !this.payPop;
			},
			pay(type) {
				this.payPop = false;
				this.bIsShowLoading = true;
				let that = this;
				var loadData = {
					type: type,
					diff_id: that.options.diff_id
				};
				hl.post('Order/pay_order_diff', loadData, true, function (res){
					that.bIsShowLoading = false;
					let data = res.data;
					if(data.code =='-1'){
						hl.showToast(data.msg, 1500);
					}else if(data.code == '-2'){	// 如果订单信息不存在，返回首页
						setTimeout(function (){
							uni.switchTab({
								url: '/pages/jewel/index/index'
							})
						}, 1000)
					}else{
						switch (loadData.type) {
						    case 'wxpay':
							case 'alipay':
								let pay_data = data.data;
						        uni.requestPayment({
						            provider: loadData.type,
						            orderInfo: pay_data,
						            success: (res) => {
						                hl.showToast('支付成功', 1500);
						                uni.navigateTo({
						                	url:'/pages/jewel/order/orderdetail?order_id='+that.order_id
						                })
						            },
						            fail: (res) => {
						                hl.showToast('支付失败');
						            },
									complete:(res)=>{
									}
						        })
						    break;
						    case 'jewel_granary':
						        if (data.code == 3) {
						            setTimeout(() => {
						                uni.reLaunch({
						                    url:'/pages/jewel/order/orderdetail?order_id='+that.order_id
						                })
						            }, 500)
						        }
						    break;
						}
					}
				})
			}
		}
	};
</script>

<style>
	.no{
		line-height: 100upx;
		color: #323232;
		font-size: 32upx;
		padding: 0 35upx;
	}
	.prod-img{
		background: #f5f3f3;
		padding-top: 35upx;
	}
	.prod-img .img{
		width: 213upx;
		height: 213upx;
		margin: 0 auto;
		display: block;
	}
	.prod-img text{
		line-height: 55upx;
		color: #424242;
		font-size: 36upx;
		display: block;
		width: 100%;
		text-align: center;
		margin-top:10px;
		padding-bottom:10px;
	}
	.list .li{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 94upx;
		padding: 0 32upx;
		border-bottom: 1px solid #e6e6e6;
	}
	.list .li .name{
		color: #343434;
		font-size: 32upx;
	}
	.list .li .size{
		color: #333333;
		font-size: 28upx;
	}
	.list .li .shop-price{
		color: #333333;
		font-size: 36upx;
	}
	.list .li .cj-price{
		color: #f47a7a;
		font-size: 36upx;
	}
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 97upx;
		background: #FFFFFF;
		border-top: 1px solid #e6e6e6;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.footer .pay-btn{
		width: 100%;
		background: #f47a7a;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
		height: 100%;
		line-height: 97upx;
	}
	.m-full-loading{
		background: rgba(255,255,255,0);
	}
	.u-popup-mask {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, .5);
	    z-index: 10;
	}
	
	.pay_type_box{
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 10;
		transform: translateY(100%);
		transition: .3s;
	}
	.pay_type{
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		width: 90%;
		margin: 20upx auto;
	}
	.wxpay{
		background: #06ba04;
	}
	.jewel_granary{
		background: #fd6361;
	}
	.alipay{
		background: #1b95d4;
	}
	.input-content {
	    width: 100%;
	    background: #f5f5f5;
	    height: 69rpx;
	    border-radius: 7rpx;
	    font-size: 25rpx;
	    padding-left: 22rpx;
	    margin-top: 20rpx;
	}
	.z-show {
	    transform: translateY(0) !important;
	}
</style>
